<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自适应宽高</title>
		<style>
			/* 补充尺寸问题: 屏幕宽高比不一致 限定一个宽高范围 */
			/* min-width属性: 最小宽度{明显}  min-height属性: 最小高度 */
			/* max-width属性: 最大宽度  max-height属性: 最大高度*/
			div{
				width: 80%; /* 默认宽度 */
				min-width: 500px; /* 内容最小宽度是500px */
				max-width: 600px; /* 页面尺寸: 最小是500px 最大是600px 默认80% */
				/* 定好最小跟最大宽高  pc: 80% 300px */
				/* 移动: 500~600宽度[页面不变] 300px */
				height: 300px;
				background: #e4393c;
			}
			/* html结构    外层div--.container  内层div--.box 写lorem
			   css结构     .container样式   背景颜色#f0f0f0
			                                padding: 20px
											文本居中*/
			/* .box样式    背景颜色#4caf50
			               文字改下颜色  白色
						   宽度60%
						   宽度范围500~600px【页面不变】
						   margin: auto*/		
            .container{
				background: #f0f0f0;
				padding: 20px;
				text-align: center;
			}
			.box{
				background: #4caf50;
				color: white;
				width: 60%;
				min-width: 500px;
				max-width: 600px;
				margin: auto;
			}
		</style>
	</head>
	<body>
		
		<div class="container">
			<div class="box">
				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint minima commodi in nobis libero mollitia sit nisi vel hic voluptas exercitationem, natus blanditiis esse facilis, repellat, harum laudantium enim laboriosam!
			</div>
		</div>
		
	</body>
</html>